import React, { Component } from 'react'
import './Left.scss';
import {BorderBox12,BorderBox13,ScrollBoard} from '@jiaminghi/data-view-react'
// import echarts from 'echars/lib/echars';
import * as echarts from 'echarts';
import axios from 'axios';
export default class Left extends Component {

    state={
        option : {
            legend: {
                data: ['出口流量', '入口流量']
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ["9:00", '12:00', '15:00', '18:00', '21:00', '00:00']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                name: '出口流量',
                data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02],
                type: 'line',
                smooth: true,
                symbol:'none',
                areaStyle: {
                    normal:{
                       //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                            offset: 0,
                            color: 'rgba(80,141,255,0.7)'
                        }, {
                            offset: .34,
                            color: 'rgba(56,155,255,0.8)'
                        },{
                            offset: 1,
                            color: 'rgba(38,197,254,0.4)'
                        }])
                    }    
                }
                },
                {
                name: '入口流量',
                data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14],
                type: 'line',
                smooth: true,
                symbol:'none',
                areaStyle: {
                    normal:{
                       //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
        
                            offset: 0,
                            color: 'rgba(120,151,12,0.6)'
                        }, {
                            offset: .34,
                            color: 'rgba(120,151,12,0.8)'
                        },{
                            offset: 1,
                            color: 'rgba(120,151,12,0.4)'
                        }])
                    }   
                }
                }
            ]
        },
        userSitua:{}
    }

    componentDidMount(){
        this.chart=echarts.init(this.el);
        this.chart.setOption(this.state.option);
        axios.get('/api/leftPageData').then(res=>{
            this.setState({userSitua:res.data.userSitua});
        })
    }

    
    render() {
        return (
            <div className='left'>
                <div className='left-top'>
                    <BorderBox12 className='borderBox12'>
                        <div className='title'>
                            <i className='iconfont icon-chart-area'></i>
                            <label>今日流量态势</label>
                        </div>
                        <div className='detail'>
                            <span>今日接纳次数(小时):<b>1500次</b></span>
                            <span>流量峰值:<b>300M</b></span>
                        </div>
                        <div ref={el=>{this.el=el}} className='show'></div>
                    </BorderBox12>
                </div> 
                <div className='left-bottom'>
                    <BorderBox13 className='borderBox13'>
                        <div className='title'>
                            <i className='iconfont icon-application'></i>
                            <label>用户数据状态</label>    
                        </div>
                        <ScrollBoard className='scrollBoard' config={this.state.userSitua} />
                    </BorderBox13>
                </div>
            </div>
        )
    }
}
